<template>
  <div class="page-container">
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="Activity name" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="number" prop="number">
        <el-input v-model="form.number" />
      </el-form-item>
      <el-form-item label="sum" prop="sum">
        <el-input v-model="form.sum" />
      </el-form-item>
      <el-form-item label="sum1" prop="sum1">
        <el-input v-model="form.sum1" />
      </el-form-item>
      <el-form-item
        label="页面文案"
        prop="content"
        :rules="[
              { required: true, message: '请输入页面文案' },
              {
                required: true,
                pattern: /^1[3|4|5|7|8|9][0-9]\d{4,11}$/,
                message: 'age must be a number',
                trigger: 'blur'
              }
            ]"
      >
        <el-input v-model="form.content" />
      </el-form-item>
      <el-form-item>
        <el-button class="pd-15-30" type="primary" @click="onSubmit">创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from 'vue'

export default {
  setup () {
    const state = reactive({
      form: {
        name: '',
        number: '',
        sum: '',
        sum1: ''
      }
    })
    const validategive = () => {
      if (state.form.sum1 > state.form.sum) {
        return false
      }
    }
    const rules = reactive({
      name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' }
      ],
      number: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        {
          pattern: /^\+?[0-9]{1}[0-9]{0,3}\d{0,0}$/, message: '输入0 ~ 9999 之间的数', trigger: 'change'
        }
      ],
      sum: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { type: 'integer', message: '请输入整数', trigger: 'blur' } // integer：类型必须为 number 且为整数。 boolean：类型必须为boolean。 number：类型必须为number。
      ],
      sum1: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        {
          validator: validategive,
          message: 'sum1 不能大于 sum',
          trigger: 'blur'
        }
      ]
    })
    // 确认
    const ruleFormRef = ref(null)
    const onSubmit = () => {
      ruleFormRef.value.validate(async valid => {
        if (!valid) return false
      })
    }
    return {
      ...toRefs(state),
      rules,
      onSubmit,
      ruleFormRef,
      validategive
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
